<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/nursinghome/nursemain' }" class="breadCrumb">首页
            </el-breadcrumb-item>
            <el-breadcrumb-item>老人信息管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="normal-management-main">
            <div class="operater-bar">
                
                

            </div>
            <div class="table-field">
                <el-table :data="tableData" border stripe style="width: 100%">
                    <el-table-column prop="ID" label="ID" />
                    <el-table-column prop="name" label="姓名" />
                    <el-table-column prop="phone" label="电话" />
                    <el-table-column prop="idnum" label="身份证号" />
                    <el-table-column prop="ActivityStatus" label="活动状态" />
                    <el-table-column prop="operator" label="操作" width="200">
                        <template #default="scope">
                            <el-button type="primary" size="small" @click="showDetail(scope.row)">
                                详情
                            </el-button>
                            <el-button type="primary" size="small">
                                编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>

    <!-- 详情对话框 -->
     <div>
    <el-dialog v-model="dialogVisible" title="详情" width="50%">
            <!--内容主体区域-->
       <el-card>
        <el-descriptions
    title="Vertical list with border"
    direction="vertical"
    :column="4"
    :size="size"
    border
  >
    <el-descriptions-item label="姓名">kooriookami</el-descriptions-item>
    <el-descriptions-item label="年龄">18100000000</el-descriptions-item>
    <el-descriptions-item label="电话" :span="2">Suzhou</el-descriptions-item>
    <el-descriptions-item label="身份证号">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
  </el-descriptions>
       </el-card>
    </el-dialog>
    </div>


</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted, computed } from 'vue';
import * as nurse from '../../api/nurse'
import { useStore } from 'vuex';
const store = useStore();
const getUsername = computed(() => store.getters.getUsername);
const nurseInfo = ref();
const Id = ref(0);
const tableData = ref([]);
const dialogVisible = ref(false)



console.log("护士工号", getUsername.value);
onMounted(async () => {

    // 获取nurse信息
    const nursepersonal = await nurse.getNurseByUsernameAPI({ nurseno: getUsername.value });
    console.log("护士工号", getUsername.value);
   //获取nurseid
    nurseInfo.value = nursepersonal.data;
    Id.value = nurseInfo.value.data[0].nurseId;
    console.log("护士id", Id.value)
    //获取老人数据
    const resp = await nurse.getElderByNurseId({ nurseid: Id.value });
    tableData.value = resp.data.data.map(item => ({
        ID: item.eldId,
        name: item.eldName,
        phone: item.eldPhone,
        idnum: item.eldIdNum,
        ActivityStatus: item.eldState=1?"外出":"在院",
        operator: ''
    }));
})
 









const bindingStatusOptions = [
    {
        value: 1,
        label: '外出'
    },
    {
        value: 0,
        label: '未外出'
    }
]

</script>

<style lang="less" scoped>
.el-breadcrumb {
    margin-bottom: 15px;
}

.normal-management-main {
    width: 1175px;
    height: 575px;
}

.operater-bar {
    width: 100%;
    flex-direction: row;
    display: flex;
}

.input-select-field {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 750px;
}

.table-field {
    width: 100%;
    margin-top: 15px;
}

.el-input {
    width: 150px;
}

.el-select {
    width: 150px;
}

.btn-field {
    width: 350px;
    display: flex;
    justify-content: flex-end;

    >.el-button {
        margin-left: 10px;
        margin-right: 10px;
    }
}
</style>